<template>
	<view class="customHead" :style="{ height: totalHeight + 'px' }">
		<view class="bg">
			<image class="bgimg" src="../../static/logo.png" mode="scaleToFill"></image>
		</view>
		<view class="container">
			<view class="statusBar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="service" :style="{ height: titleBarHeight + 'px' }" v-if="!foldState">
				<view class="kefu">
					<u-icon name="server-fill" size="22" color="#fff"></u-icon>
				</view>
				<navigator class="manage">
					<u-icon name="bag-fill" size="22" color="#fff"></u-icon>
					后台管理
				</navigator>
			</view>

			<view class="body" :class="foldState ? 'fold' : ''" :style="{height: bodyBarHeight +'px'}">
				<view class="brand">
					<veiw class="pic">
						<image class="img" src="/static/logo.png" mode="aspectFill"></image>
					</veiw>
					<view class="text">
						<view class="title">
							<text class="font">线下米的小店</text>
							<u-icon name="more-circle" size="26" color="#fff"></u-icon>
						</view>
						<view class="des">一大堆的品牌介绍</view>
					</view>
				</view>
				<view class="code">
					<view class="pic">
						<image class="img" src="/static/logo.png" mode="aspectFill"></image>
					</view>
					<text class="pay">付款</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomHeadBar',
	props: {
		foldState: {
			type: Boolean,
			defaultValue: false
		}
	},
	data() {
		return {
			statusBarHeight: 0,
			titleBarHeight: 0
		};
	},
	computed: {
		totalHeight() {
			if (this.foldState) return this.statusBarHeight + this.titleBarHeight
			return this.statusBarHeight + this.titleBarHeight + 100;
		},
		bodyBarHeight() {
			if (this.foldState) return this.titleBarHeight
			return 100
		}
	},
	mounted() {
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 20;
		// #ifdef MP-WEIXIN
		let menuBtnInfo = uni.getMenuButtonBoundingClientRect();
		this.titleBarHeight = (menuBtnInfo.top - this.statusBarHeight) * 2 + menuBtnInfo.height;
		console.log(this.titleBarHeight);
		// #endif

		// #ifndef MP-WEIXIN
		this.titleBarHeight = 40;
		// #endif
	}
};
</script>

<style lang="scss">
.customHead {
	height: 400rpx;
	overflow: hidden;
	.bg {
		background: #000000;
		width: 100%;
		height: 100%;
		.bgimg {
			width: 100%;
			height: 100%;
			filter: blur(30rpx);
			transform: scale(2);
		}
	}
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		.statusBar {
			//height: var(--status-bar-height);
			border: 1px solid green;
		}
		.service {
			border: 1px solid blue;
			padding-left: 30rpx;
			@include flex-box-set(start);

			.manage {
				@include flex-box-set(start);
				padding-left: 20rpx;
			}
		}

		.body {
			@include flex-box();
			padding: 0 45rpx;
			height: 100px;
			border: 1px solid yellow;
			transition: 0.3s;
			.brand {
				width: 580rpx;
				@include flex-box-set(start);
				.pic {
					width: 100rpx;
					height: 110rpx;
					border-radius: 50%;
					overflow: hidden;
					transition: 0.3s;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					flex: 1;
					padding: 0 30rpx;
					color: #fff;
					.title {
						font-size: 36rpx;
						font-weight: 800;
						display: flex;
						align-items: center;
					}
					.des {
						font-size: 26rpx;
						width: 100%;
						opacity: 0.8;
						padding-top: 5rpx;
					}
				}
			}
			.code {
				width: 80rpx;
				height: 80rpx;
				border-left: 1px solid rgb(255, 255, 255);
				@include flex-box-set();
				flex-direction: column;
				.pic {
					width: 40rpx;
					height: 40rpx;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.pay {
					font-size: 22rpx;
					color: #fff;
				}
			}
			&.fold {
				padding: 0 30rpx;
				.brand {
					.title {
						font-size: 28rpx;
					}
					.des {
						display: none;
					}
				}
				.code {
					display: none;
				}
			}
		}
	}
}
</style>
